//入口文件
import Vue from 'vue'

//1.1导入路由的包
import VueRouter from 'vue-router'
Vue.use(VueRouter)

//2.1导入vue-resource
import VueResource from 'vue-resource'
//2.2安装路由
Vue.use(VueResource)

//按需导入mint-ui中的组件
// import { Header, Swipe, SwipeItem, Button, Lazyload } from 'mint-ui'
// Vue.component(Header.name, Header)
// Vue.component(Swipe.name, Swipe)
// Vue.component(SwipeItem.name, SwipeItem)
// Vue.component(Button.name, Button)
// Vue.use(Lazyload)

//导入全部的mint-UI
import MintUI from 'mint-ui'
Vue.use(MintUI)
import 'mint-ui/lib/style.css'

//安装图片预览插件
import VuePreview from 'vue-preview'
Vue.use(VuePreview)

//导入mui的样式
import './lib/mui/css/mui.min.css'
import './lib/mui/css/icons-extra.css'


//1.3导入之间的router.js路由模块
import router from './router.js'


//配置vuex的步骤
//1.运行cnpm i vuex -S
//2.导入包
import Vuex from 'vuex'
//3.注册vuex到vue中
Vue.use(Vuex)
//4.new Vuex.Store()实例，得到一个数据仓储对象

var car = JSON.parse(localStorage.getItem('car' || '[]'))
var store = new Vuex.Store({
  state: {
    //大家可以把 state 想象成组件中的data，专门用来存储数据的
    //如果在组件中，想要访问store中的数据，只能通过 this.$store.state.***来访问
    car: car
  },
  mutations: {
    //注意：如果要操作store中的state值，只能通过调用mutations提供的方法，才能操作对应的数据，不推荐直接操作state中的数据，因为万一导致了数据的紊乱，不能快速定位到错误的原因，因为每个组件都可能有操作数据的方法

    addToCar(state, goodsinfo){
      var flag = false;
      state.car.some(item=>{
        if(item.id === goodsinfo.id){
          item.count += parseInt(goodsinfo.count)
          flag = true;
          return true
        }
      })
      if(!flag){
        state.car.push(goodsinfo)
      }

      //当更新car之后，把car数组存储大本地的localStorage中
      localStorage.setItem('car', JSON.stringify(state.car))
    },
    updateGoodscount(state, goodsinfo) {
      state.car.some(item=>{
        if(item.id === goodsinfo.id){
          item.count = parseInt(goodsinfo.count)
          return true;
        }
      })
      localStorage.setItem('car', JSON.stringify(state.car))
    },
    removeFormCar(state, id){
      state.car.some((item, i)=>{
        if(item.id==id){
          state.car.splice(i,1)
          return true
        }
      })
      localStorage.setItem('car', JSON.stringify(state.car))
    },
    updateGoodsSelected(state, info){
      state.car.some(item=>{
        if(item.id == info.id){
          item.selected=info.selected
        }
      })
      localStorage.setItem('car', JSON.stringify(state.car))
    }
    //注意：如果组件想调用mutations中的方法，只能使用this.$store.commit('方法名')
    //这种调用mustations方法格式，和this.$emit('父组件中方法名')
  },
  getters:{
    //相当于计算属性，也相当于filters
    getAllCount(state){
      var c = 0;
      state.car.forEach(item=>{
        c+=item.count
      })
      return c
    },
    getGoodsCount(state){
      var o = {}
      state.car.forEach(item=>{
        o[item.id]=item.count
      })
      console.log(o)
      return o;
      
    },
    getGoodsSelected(state){
      var o = {}
      state.car.forEach(item=>{
        o[item.id] = item.selected
      })
      return o
    },
    getGoodsCountAndAmount(state){
      var o = {
        count:0,
        amount:0
      }
      state.car.forEach(item=>{
        if(item.selected){
          o.count += item.count
          o.amount += item.price*item.count
        }
      })
      return o;
    }
  }
})


//设置请求的根路径
Vue.http.options.root = 'http://coinbank.ai'
Vue.http.options.emulateJSON = true

//导入格式化时间的插件 
import moment from 'moment'

//定义全局的过滤器
Vue.filter('dateFormat', function(dataStr, pattern = "YYYY-MM-DD HH:mm:ss"){
  return moment(dataStr).format(pattern)
})
//导入App组件
import app from './App.vue'
var vm =new Vue({
  el: '#app',
  render: c => c(app),
  router,//1.4 挂载理由对象到 VM 实例上
  store //5.将vuex创建的store挂在到VM实例上，只要挂在到VM上，任何组件都能使用store来存取数据
})